<template>
  <div class="page">
    <div class="pd">
      <div class="weui-flex v-mdl bd bd-b pdb">
        <div class="weui-flex__item">
          <input type="text" maxlength='15' placeholder="请输入班级名称" v-model="name" placeholder-class="holder"/>
        </div>
        <div>
          <span class="c-gray" :class="{'c-red': isNameMaxLimit}">{{15 - name.length}}/15</span>
        </div>
      </div>
    </div>
    <div class="bg-white pdh-l mgt-xl">
      <button type="button" class="ui btn primary" :loading="isLoading" :class="{'disabled': !name}" @tap="onCreate">完成</button>
    </div>
  </div>
</template>

<script>
import * as $group from '@/api/group'
import base from '@/mixins/base'
import { mapGetters, mapActions } from 'vuex'
import {UNSHIRFT_GROUPS} from '../task-create-select-group/store'

export default {
  mixins: [base],
  data () {
    return {
      name: '',
      isLoading: false
    }
  },
  computed: {
    isNameMaxLimit () {
      return this.name.length >= 15
    }
  },
  methods: {
    ...mapActions('group', [
      'getMyGroups'
    ]),
    async onCreate () {
      if (this.isLoading) return
      if (!this.name) return
      this.isLoading = true
      let group = await $group.create({name: this.name})
      this.isLoading = false
      if (!group) return
      this.name = ''
      this.$store.commit('group/GROUP_UNSHIFT_GROUPS', group)
      this.$store.commit('UI_SET_TOAST_SUCCESS_MSG', '创建成功！')
      let {from} = this.getParams()
      if (from === 'document-publish') {
        wx.navigateBack()
        return
      } else if (from === 'task-create-select-group') {
        this.$store.commit('task-create-select-group/' + UNSHIRFT_GROUPS, group)
        wx.navigateBack()
        return
      }
      wx.redirectTo({
        url: '/pages/user-group/main?groupId=' + group.id
      })
    }
  }
}
</script>

<style scoped lang="less">
.ab{
    right: 32rpx;
    top: 32rpx;
  }
</style>
